<template>
    <div class="swipe">
        <van-swipe class="swipe-list" :autoplay="3000" indicator-color="white">
            <template v-for="(item, index) in swipeData">
                <van-swipe-item class="item">
                    <img :src="item.url" alt="">
                </van-swipe-item>
            </template>
            <!-- 指示器 -->
            <template #indicator="{ active, total }">
                <div class="indicator">
                    <template v-for="(value, key, index) in swipeGroup" :key="key">
                        <span class="item" :class="{ active: swipeData[active]?.enumPictureCategory == key }">
                            <span class="text">{{ getName(value[0].title) }}</span>
                            <span class="count" v-if="swipeData[active]?.enumPictureCategory == key">
                                {{ getCategoryIndex(swipeData[active]) }}/{{ value.length }}
                            </span>
                        </span>
                    </template>
                </div>
            </template>
        </van-swipe>
    </div>
</template>


<script setup>

const props = defineProps({
    swipeData: {
        type: Array,
        default: () => []
    }
})

// 对数据进行转换
const swipeGroup = {}
for (const item of props.swipeData) {
    const valueArray = swipeGroup[item.enumPictureCategory] || []
    valueArray.push(item)
    swipeGroup[item.enumPictureCategory] = valueArray
}

// 转换数据方法
const nameReg = /【(.*?)】/i
const getName = (name) => {
    // return name.replace("：", "").replace("】", "").replace("【", "")
    const results = nameReg.exec(name)
    return results[1]
}
const getCategoryIndex = (item) => {
    // 返回指示器当前索引号
    return swipeGroup[item.enumPictureCategory].findIndex(value => value === item) + 1
}

</script>


<style lang="less" scoped>
.swipe {
    .swipe-list {
        .item {
            img {
                width: 100%;
            }
        }

        .indicator {
            position: absolute;
            display: flex;
            right: 5px;
            bottom: 5px;
            padding: 2px 5px;
            font-size: 11px;
            background: rgba(0, 0, 0, 0.1);
            color: #fff;

            .item {
                margin: 0 3px;

                &.active {
                    padding: 0 3px;
                    border-radius: 5px;
                    background-color: #fff;
                    color: #333;
                }
            }
        }
    }
}
</style>